<!--
 * @Descripttion: 回款信息
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-20 16:06:02
 * @LastEditTime: 2022-08-11 09:41:45
-->
<template>
  <div class="collection-msg">
    <div class="flex flex-horizontal-between">
      <ul class="flex money-total">
        <li v-for="(item,index) in costList" :key="index">
          <p class="money-num text-center">{{$tool.formatterMoney(payMsg[item.key])}}</p>
          <p class="money-text text-center">{{item.title}}</p>
        </li>
      </ul>
      <Button type="primary" v-if="adjustFlag" @click="adjustCollFun">调整回款计划</Button>
    </div>
    <div>
      <div class="collection-list" v-for="(item,index) in payMsg.repaymentPlanDetailInfoList"
        :key="index">
        <div class="contract-msg flex flex-vertical-center flex-horizontal-between">
          <ul class="flex flex-horizontal-between">
            <li v-for="(itemCon,indexcon) in contractList" :key="indexcon">
              <p class="text-center">{{itemCon.name}}</p>
              <p class="text-center" v-if="itemCon.type=='text'">{{item[itemCon.key]}}</p>
              <p class="text-center" v-else>{{$tool.formatterMoney(item[itemCon.key])}}</p>
            </li>
          </ul>
          <div class="flex flex-vertical-center">
            <Button type="primary" @click="paymentTaskBtn(item)"
              v-if="(item.repaymentPlanStatus == 3||item.repaymentPlanStatus == 2) && (item.approvingMoney == 0||item.approvingMoney == '-') && payFlag">代回款</Button>
            <Icon type="ios-arrow-up" class="hand" size="50"
              v-show="showIndex.indexOf(index)>-1" @click="expandFun(index)" />
            <Icon type="ios-arrow-down" class="hand" size="50"
              v-show="showIndex.indexOf(index)==-1" @click="expandFun(index)" />
          </div>
        </div>
        <div class="time-line" v-show="showIndex.indexOf(index)>-1">
          <Timeline>
            <TimelineItem v-for="(itemTime,indexTime) in item.recordDetailInfoList"
              :key="indexTime">
              <div class="flex" v-if="itemTime.payBackStatus==1">
                <p class="time-status status-normal">{{itemTime.payBackStatusStr}}</p>
                <ul class="time-detail flex">
                  <li v-for="(itemArr,indexArr) in arrivalList" :key="indexArr">
                    <div v-if="itemArr.key=='operatorName'">
                      <Button class="operate-btn"
                        v-if="itemTime['receiptRecordStatus']==1&& unlocking('0104030314')"
                        type="primary"
                        @click="confirmFun(itemTime['receiptRecordStatus'],itemTime)">回款审核</Button>
                      <div v-else>
                        <p>{{itemArr.name}}</p>
                        <p>{{itemTime[itemArr.key]}}</p>
                      </div>
                    </div>
                    <div v-else>
                      <p>{{itemArr.name}}</p>
                      <p v-if="itemArr.type=='text'"
                        :class="[{'remark':itemArr.key=='remark'},{'operate-status':itemArr.key=='receiptRecordStatusStr' && itemTime['receiptRecordStatus']==1}]">
                        {{itemTime[itemArr.key]}}</p>
                      <p v-else>{{$tool.formatterMoney(itemTime[itemArr.key])}}</p>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="flex" v-if="itemTime.payBackStatus==2">
                <p class="time-status status-unNormal">{{itemTime.payBackStatusStr}}</p>
                <ul class="time-detail flex">
                  <li v-for="(itemAd,indexAd) in adjustmentList" :key="indexAd">
                    <p>{{itemAd.name}}</p>
                    <p v-if="itemAd.type=='text'" :class="[{'remark':itemAd.key=='remark'}]">
                      {{itemTime[itemAd.key]}}</p>
                    <p v-else>{{$tool.formatterMoney(itemTime[itemAd.key])}}</p>
                  </li>
                </ul>
              </div>
              <div class="flex" v-if="itemTime.payBackStatus==3">
                <p class="time-status status-unNormal">{{itemTime.payBackStatusStr}}</p>
                <ul class="time-detail flex">
                  <li v-for="(itemCan,indexCan) in cancleList" :key="indexCan">
                    <p>{{itemCan.name}}</p>
                    <p v-if="itemCan.type=='text'" :class="[{'remark':itemCan.key=='remark'}]">
                      {{itemTime[itemCan.key]}}</p>
                    <p v-else>{{$tool.formatterMoney(itemTime[itemCan.key])}}</p>
                  </li>
                </ul>
              </div>
            </TimelineItem>
          </Timeline>
        </div>
      </div>
    </div>
    <!-- 回款审核or作废弹窗 -->
    <Modal v-model="returnedMoneyModalflag" :title="returnedMoneyModalTitle"
      @on-cancel="AllModalCancel" width="600px" :footerHide="true">
      <returned-money-modal v-if="returnedMoneyModalflag" @onClose='AllModalCancel'
        @onChangeTable='getPayLog' :rowsData='rowsData'
        :returnedMoneyModaltype='returnedMoneyModaltype' />
    </Modal>
    <!--调整回款计划-->
    <adjust-collection ref="adjustCollection" @onSearch="getPayLog" :contractId="contractId" />
    <!-- 代回款弹窗 -->
    <Modal v-model="paymentTaskFlag" title="新增回款" @on-cancel="AllModalCancel" width="700px"
      :footerHide="true">
      <payment-task-modal @onClose='AllModalCancel' :paymentPlanId='paymentPlanId'
        @onChangeTable='getPayLog' v-if="paymentTaskFlag" />
    </Modal>
  </div>
</template>
<script>
  import comMgr from '@/biz/sales/salesCommon'
  import adjustCollection from './adjustCollection.vue'
  import returnedMoneyModal from '../../paymentManagement/component/returnedMoneyModal.vue'
  import paymentTaskModal from './paymentTaskModal.vue'
  export default {
    props: ['contractId', 'detailMsg'],
    data() {
      return {
        paymentTaskFlag: false,
        paymentPlanId: '',
        returnedMoneyModalflag: false,
        returnedMoneyModaltype: null,
        returnedMoneyModalTitle: '',
        rowsData: null,
        payMsg: {},
        showIndex: [],
        adjustFlag: false,
        payFlag: false,
        costList:[
          {
            key:'totalPrice',
            title:'签约总价(元)'
          },
          {
            key:'accumulateMoney',
            title:'累计到账房款(元)'
          },
          {
            key:'remainingMoney',
            title:'剩余未到账房款(元)'
          }
        ],
        // 头部
        contractList: [
        {
          name: '合同约定回款日期',
          key: 'contractTime',
          type: 'text',
        },
        {
          name: '回款方式',
          key: 'receiptTypeStr',
          type: 'text',
        },
        {
          name: '约定回款金额(元)',
          key: 'contractMoney',
          type: 'money',
        },
        {
          name: '已回款金额(元)',
          key: 'payBackMoney',
          type: 'money',
        },
        {
          name: '剩余回款金额(元)',
          key: 'unpaidMoney',
          type: 'money',
        },
        {
          name: '所属回款批次',
          key: 'paybackPeriodValue',
          type: 'text',
        },
        {
          name: '约定执行状态',
          key: 'repaymentPlanStatusStr',
          type: 'text',
        }, ],
        // 回款到账
        arrivalList: [
        {
          name: '回款流水编号',
          key: 'receiptNumber',
          type: 'text',
        },
        {
          name: '回款金额(元)',
          key: 'universalMoney',
          type: 'money',
        },
        {
          name: '回款日期',
          key: 'universalTime',
          type: 'text',
        },
        {
          name: '已入账金额(元)',
          key: 'creditMoney',
          type: 'money',
        },
        {
          name: '入账日期',
          key: 'creditTime',
          type: 'text',
        },
        {
          name: '回款人',
          key: 'receiptName',
          type: 'text',
        },
        {
          name: '回款状态',
          key: 'receiptRecordStatusStr',
          type: 'text',
        },
        {
          name: '审核时间',
          key: 'reviewTime',
          type: 'text',
        },
        {
          name: '操作人',
          key: 'operatorName',
          type: 'text',
        },
        {
          name: '',
          key: 'button',
          type: 'text',
        }, ],
        // 回款作废
        cancleList: [
        {
          name: '作废流水编号',
          key: 'voidNumber',
          type: 'text',
        },
        {
          name: '作废金额(元)',
          key: 'universalMoney',
          type: 'money',
        },
        {
          name: '作废日期',
          key: 'universalTime',
          type: 'text',
        },
        {
          name: '对应回款流水编号',
          key: 'receiptNumber',
          type: 'text',
        },
        {
          name: '对应回款日期',
          key: 'correspondTime',
          type: 'text',
        },
        {
          name: '作废原因',
          key: 'remark',
          type: 'text',
        },
        {
          name: '',
          key: '',
          type: '',
        },
        {
          name: '',
          key: '',
          type: '',
        },
        {
          name: '操作人',
          key: 'operatorName',
          type: 'text',
        }, ],
        //回款调整
        adjustmentList: [
        {
          name: '',
          key: '',
          type: '',
        },
        {
          name: '调整金额(元)',
          key: 'universalMoney',
          type: 'money',
        },
        {
          name: '调整日期',
          key: 'correspondTime',
          type: 'text',
        },
        {
          name: '',
          key: '',
          type: '',
        },
        {
          name: '下次回款日期',
          key: 'universalTime',
          type: 'text',
        },
        {
          name: '调整原因',
          key: 'remark',
          type: 'text',
        },
        {
          name: '',
          key: '',
          type: '',
        },
        {
          name: '',
          key: '',
          type: '',
        },
        {
          name: '操作人',
          key: 'operatorName',
          type: 'text',
        }, ],
      }
    },
    mounted() {
      this.getPayLog()
      let statusName = this.detailMsg.orContractBaseInfoVO.statusName

      this.adjustFlag = ['签约回款中', '签约已全款', '签约已交房'].indexOf(statusName) > -1 &&
        this.unlocking('0104030317') ? true :
        false

      this.payFlag = ['签约回款中', '签约已交房'].indexOf(statusName) > -1 &&
        this.unlocking('0104030318') ? true :
        false
    },
    components: {
      returnedMoneyModal,
      adjustCollection,
      paymentTaskModal
    },
    methods: {
      confirmFun(type, obj) {
        this.returnedMoneyModaltype = type
        this.rowsData = obj
        this.returnedMoneyModalflag = true
        this.returnedMoneyModalTitle = '回款审核'
      },
      // 展开收缩
      expandFun(index) {
        if (this.showIndex.indexOf(index) > -1) {
          this.showIndex.splice(this.showIndex.indexOf(index), 1)
        } else {
          this.showIndex.push(index)
        }
      },
      // 获取回款记录
      getPayLog() {
        let params = {
          contractId: this.contractId,
        }
        comMgr
          .getPaymentMsg(params)
          .then((res) => {
            if (res) {
              this.payMsg = { ...res }
              // 空数据处理
              this.payMsg.repaymentPlanDetailInfoList.forEach(
                (element, index) => {
                  this.showIndex.push(index)
                }
              )
            } else {
              this.payMsg = {}
            }
          })
          .catch((res) => {
            this.payMsg = {}
          })
      },
      adjustCollFun() {
        this.$refs.adjustCollection.show(this.payMsg)
      },
      //待回款
      paymentTaskBtn(row) {
        this.paymentTaskFlag = true
        this.paymentPlanId = row.repaymentPlanId
      },
      AllModalCancel() {
        this.returnedMoneyModalflag = false
        this.paymentTaskFlag = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  .collection-msg {
    max-height: 650px;
    overflow-y: auto;

    .money-total {
      li {
        padding: 0 40px;
        border-right: 1px solid #dadada;
      }

      li:last-child {
        border: none;
      }

      .money-num {
        font-size: 26px;
        color: #000;
        font-weight: bold;
        line-height: 50px;
      }
    }

    .collection-list {
      margin-top: 20px;
      border: 1px solid #dadada;

      .contract-msg {
        background-color: #dadada;

        ul {

          // width: 63%;
          li {
            padding: 10px 20px;

            p {
              line-height: 30px;
            }
          }
        }

        .ivu-icon {
          margin-right: 30px;
        }
      }

      .time-line {
        padding: 20px;

        .time-detail {
          width: calc(100% - 100px);

          li {
            width: 150px;
            text-align: center;

            p {
              line-height: 30px;
            }
          }
        }
      }

      .time-status {
        margin-right: 20px;
        padding: 5px 10px;
        height: 30px;
        line-height: 20px;
      }

      .operate-btn {
        margin-top: 30px;
      }

      .operate-status {
        color: #d9001b;
      }

      .status-unNormal {
        color: #ff7740;
        border: 1px solid #ff7740;
      }

      .status-normal {
        color: #70b603;
        border: 1px solid #70b603;
      }
    }
  }
</style>